<template>
	<view class="box">
		<view class="demo flex">
			<view class="d-img f-w">
				<image :src="info.product.image" mode=""></image>
			</view>
			<view class="right">
				<view class="one hide-line bold f28">{{info.product.store_name}}</view>
				<view class="two fw-bt">
					<view class="tag2">{{info.buying_count_num}}人团</view>
					<view class="c999 f22">已有{{info.buying_count_num*1*info.success_num}}人参团</view>
				</view>
				<view class="three">
					<view class="red">拼团价￥<text class="bold">{{info.price}}</text></view>
					<view class="f24 c999">原价￥{{info.product.price}}</view>
				</view>
			</view>
		</view>
		<!-- 1 -->
		<view class="box1" v-if="!isjoin">
			<view class="title tr f26">支付开团并邀请好友参加，人数不足自动退款</view>
			<view class="btn fw-bt">
				<view class="btn1" @click="join" style="text-align: center;line-height: 90rpx">我要参团</view>
				<!-- <view class="btn2" @click="openTuan">我要开团@=</view> -->
				<view class="btn2">
					<rules :product="info.product" shop>
						<view style="text-align: center;line-height: 90rpx">
							我要开团
						</view>
					</rules>
				</view>
			</view>
		</view>
		<!-- 2 -->
		<view class="box1 box2" v-show="isjoin">
		<!-- <view class="box1 box2"> -->
			<view class="title tr f26">以下小伙伴正在发起拼团，您可以直接参加</view>
			<template v-for="(item,index) in info.groupBuying">
				<!-- {{JSON.stringify(info.product)}} -->
				<view class="demo2 flex">
					<view class="img">
						<image :src="item.initiator.avatar" mode=""></image>
					</view>
					<view class="r2 fw-bt">
						<view>
							<view class="f26">{{item.initiator.nickname}}</view>
							<view class="f22 c999">
								{{`还差${item.buying_count_num*1-item.yet_buying_num}人成团，倒计时 ${item.h||0}:${item.m||0}:${item.s||0}`}}
							</view>
						</view>
						<!-- <view class="btn3" @click="goCantuan(item.group_buying_id)">我要参团##</view> -->
						<!-- 尼玛，不起效果
						<rules :product="product"  :group_buying_id='item.group_buying_id' shop>
							<view class="btn3">我要参团</view>
						</rules> -->


						<rules :product="product" :callbackFunction="xxx" shop>
							<view class="btn3" @click="setGroupBuying(item.group_buying_id)">
								我要参团
							</view>
						</rules>

					</view>
				</view>
			</template>


		</view>
	</view>
</template>

<script>
	import rules from '@/components/rules.vue'
	export default {
		components: {
			rules
		},
		data() {
			return {
				id: '',
				info: {},
				product: {},
				isjoin: false,
				group_buying_id: '',
				users: [],
				list3: [{
					time: '2022-02-25 15:36:00'
				}]
			}
		},
		onLoad(e) {
			this.id = e.id
		},
		onShow() {
			this.$countTime(this.users, 'time', 'djs')
			this.getgoodsinfo()
		},
		onHide() {
			this.endInter()
		},
		onUnload: function() {
			this.endInter()
		},
		methods: {
			setGroupBuying(group_buying_id) {
				this.group_buying_id = group_buying_id
			},
			xxx() {
				this.setProduct(this.$parent.product, this.$parent.group_buying_id)
			},
			endInter: function() {

				let list = this.info.groupBuying;
				list.forEach((v) => {

					clearInterval(v.timer);

				});

			},
			// 倒计时
			timeCountDown() {

				let list = this.info.groupBuying;

				list.forEach((v) => {

					// 开定时器时先关闭定时器
					if (v.timer) {
						clearInterval(v.timer);
					}

					v.timer = setInterval(() => {
						v.endtime = v.endtime - 1000

						if (v.endtime <= 0) {
							v.d = 0
							v.h = 0
							v.m = 0
							v.s = 0
							if (v.timer) {
								// 自动完成这里造成了死循环
								clearInterval(v.timer);
								this.getgoodsinfo()
								// this.completeOrder(v.order_id, v);
							} // 刷新进行中

						} else {

							this.$set(v, 'd', Math.floor(v.endtime / 1000 / 60 / 60 / 24))
							this.$set(v, 'h', Math.floor(v.endtime / 1000 / 60 / 60 % 24))
							this.$set(v, 'm', Math.floor(v.endtime / 1000 / 60 % 60))
							this.$set(v, 's', Math.floor(v.endtime / 1000 % 60))
						}

					}, 1000);
				});
			},

			getgoodsinfo() {
				let info = {}
				console.log('**************')
				this.$request('store/product/group/detail/' + this.id, {}, 'GET').then(res => {
					info = res.data
					info.product.product_group_id = res.data.product_group_id
					// info.groupBuying.forEach(groupBuying => {
					// 	groupBuying.product = res.data.product
					// 	// this.$set(groupBuying, 'product', res.data.product)
					// })
					this.product = res.data.product
					console.log(info, 'infoinfoinfoinfoinfo')
					this.info = info
					// info.groupBuying.forEach(item => {
					// 	item.endtime =
					// 		(item.end_time * 1000 - new Date().getTime())
					// })

					// this.timeCountDown()
				}).catch(err => {
					console.log(err, 'fffffffffff')
				})

			},
			// 开团
			openTuan() {
				uni.showLoading({
					mask: true
				})
				let data = {
					cart_num: 1,
					is_new: 1,
					product_type: 4,
					product_attr_unique: this.info.product.sku[''].unique,
					product_id: this.info.product_group_id
				}

				this.$request('user/cart/create', data, 'POST').then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						// console.log('开团');
						uni.navigateTo({
							url: '/pages/user/spellgroup/order-sure?id=' + this.id + '&cart_id=' + res.data
								.cart_id
						})
					}
				})



			},
			join() {
				if (this.info.groupBuying.length == 0) {
					uni.showToast({
						title: "暂无拼团",
						icon: "error"
					})
					return
				}
				this.isjoin = true
			},
			// 参团
			goCantuan(id) {
				uni.showLoading({
					mask: true
				})
				let data = {
					cart_num: 1,
					is_new: 1,
					product_type: 4,
					product_attr_unique: this.info.product.sku[''].unique,
					group_buying_id: id,
					product_id: this.info.product_group_id
				}

				this.$request('user/cart/create', data, 'POST').then(res => {
					if (res.status == 200) {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/user/spellgroup/order-sure?id=' + this.id + '&cart_id=' + res.data
								.cart_id
						})
					}
				})


			}
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box {
		padding: 20rpx 30rpx;

		&>view {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
		}

		.demo {
			padding: 30rpx;

			.d-img {
				flex-shrink: 0;
				width: 190rpx;
				height: 190rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 12rpx;
				}
			}

			.right {
				position: relative;
				flex: 1;
				margin-left: 15rpx;
				overflow: hidden;

				.two {
					margin: 10rpx 0 26rpx;
					text-align: center;
					line-height: 28rpx;
					font-size: 22rpx;

					.tag1 {
						padding: 2rpx 8rpx;
						color: #fff;
						background: linear-gradient(64deg, #FF164E, #FC420A);
						border-radius: 4rpx 0rpx 0rpx 4rpx;
					}

					.tag2 {
						padding: 3rpx 10rpx;
						background: #FFF4F5;
						color: #F83535;
						border-radius: 4rpx;
					}
				}

				.three {
					font-size: 24rpx;

					.bold {
						font-size: 44rpx;
					}

					.red {
						margin-bottom: 2rpx;
					}
				}
			}
		}

		.box1 {
			padding: 50rpx 0;

			.btn {
				margin-top: 54rpx;
				padding: 0 60rpx;

				&>view {
					width: 260rpx;
					height: 90rpx;
					// line-height: 90rpx;
					// text-align: center;
					color: #109C7A;
					background: #FFFFFF;
					border: 1rpx solid #109C7A;
					border-radius: 10rpx;
				}

				.btn2 {
					// margin-left: 50rpx;
					background: linear-gradient(64deg, #2BCCA5, #22B591);
					box-shadow: 0px 4px 6px 0px rgba(20, 187, 146, 0.4);
					color: #fff;
					border: none;
				}
			}
		}

		.box2 {
			padding: 35rpx 30rpx 0;

			& .demo2:not(:last-child) {
				border-bottom: 1rpx solid #eee;
			}
		}

		.demo2 {
			padding: 40rpx 0;

			.img {
				flex-shrink: 0;
				width: 70rpx;
				height: 70rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.r2 {
				margin-left: 15rpx;
				flex: 1;

				&>view>view:nth-child(1) {
					margin-bottom: 8rpx;
				}
			}

			.btn3 {
				width: 120rpx;
				height: 54rpx;
				font-size: 22rpx;
				line-height: 54rpx;
				text-align: center;
				border-radius: 10rpx;
				background: linear-gradient(64deg, #2BCCA5, #22B591);
				box-shadow: 0px 4px 6px 0px rgba(20, 187, 146, 0.4);
				color: #fff;
			}
		}
	}
</style>
